<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%@ taglib uri="http://www.springframework.org/tags" prefix="s"%>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form"%>

<%@ page session="false"%>

<link href="<c:url value="/resources/css/jqueryui/jquery-ui.css" />" rel="stylesheet" > </link>
<link href="<c:url value="/resources/css/shopizer-admin.css" />" rel="stylesheet" > </link>
<link href="<c:url value="/resources/css/jqpagination.css" />" rel="stylesheet" > </link>
<script src="<c:url value="/resources/js/jqueryui/jquery.js" />" ></script>
<script src="<c:url value="/resources/js/jqueryui/jquery-ui.js" />" ></script>
<script src="<c:url value="/resources/js/report.js" />" ></script>
<script src="<c:url value="/resources/js/jquery.jqpagination.js" />" ></script>

<div class="tabbable">
	<jsp:include page="/common/adminTabs.jsp" />

	<div class="tab-content">
		<div class="tab-pane active" id="report">
			<div class="box">
				<span class="box-title">
					<h3>
						<s:message code="label.reports.customer.title" text="Customer Report" />
					</h3>
					<br />
				</span>

				<div id="searchCriteria">
					<c:url var="reportQuery" value="/admin/reports/customer.html"/>
					<form action="${reportQuery}" method="POST" id="postForm">
						<table style="width: 70%">
							<tr>
								<td width="50%"><s:message code="report.text.fromDate" text="From Date" />: &nbsp;
									<input id="fromDate" name="fromDate" style="width: 100px;" value="${fromDate}"/>
								</td>
								<td width="50%" align="right"><s:message code="report.text.toDate" text="To Date" />: &nbsp;
									<input id="toDate" name="toDate" style="width: 100px;" value="${toDate}"/>
								</td>
							</tr>
							<tr>
								<td align="right" width="50%">
									<button type="submit">
										<s:message code="button.label.search" text="Search"/>
									</button>
									<input type="hidden" name="pageIndex" value="1" id="pageIndex">
								</td>
							</tr>
						</table>
					</form>
				</div>
				
				<div>
					<c:if test="${!empty result }">
						<div style="float: right; margin-bottom: 5px;">
							<a id="exportPdf" href="<c:url value="/admin/reports/customer/pdf.html" />" >
								<img class="icon" alt="Export PDF" src="<c:url value="/resources/img/pdf.jpg" />" />
							</a>
							<a id="exportExcel" href="<c:url value="/admin/reports/customer/excel.html"/>" >
								<img class="icon" alt="Export Excel" src="<c:url value="/resources/img/excel.png" /> "/>
							</a>
						</div>
						<div style="float: right; margin-bottom: 5px;">
							<div class="reportpagination" >
							    <a href="#" class="first" data-action="first">&laquo;</a>
							    <a href="#" class="previous" data-action="previous">&lsaquo;</a>
							    <input type="text" readonly="readonly" />
							    <a href="#" class="next" data-action="next">&rsaquo;</a>
							    <a href="#" class="last" data-action="last">&raquo;</a>
							</div>
							<script>
							   	$('.reportpagination').jqPagination({
								    paged: function(page) {
								        $('#pageIndex').val(page);
								    	$('#postForm').submit();
								    },
								    max_page:'${pageSize}',
								    current_page: '${pageIndex}'
								}
							    );
							</script>
						</div>
						<div  id="result">
							${result}
						</div>
					</c:if>
				</div>
			</div>
		</div>

	</div>
</div>
